<template>
  <table
    cellspacing="0"
    cellpadding="0"
    class="date-table"
    @click="handleClick"
    @mousemove="handleMouseMove"
    :class="{ 'is-week-mode': selectionMode === 'week' }">
    <tbody>
      <tr>
        <th v-if="showWeekNumber">{{ getLocale('datePicker.week') }}</th>
        <th v-for="week in WEEKS">{{ getLocale('datePicker.weeks.' + week) }}</th>
      </tr>
      <tr
        class="date-table-row"
        v-for="row in rows"
        :class="{ current: isWeekActive(row[1]) }">
        <td
          v-for="cell in row"
          :class="getCellClasses(cell)"
          v-text="cell.type === 'today' ? getLocale('datePicker.today') : cell.text"></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  import {DateUtils, DomUtils} from '../utils'
  import LOCALES from '../../../locales'

  export default {
    props: {
      firstDayOfWeek: {
        default: 7,
        type: Number,
        validator: val => val >= 1 && val <= 7
      },

      date: {},

      year: {},

      month: {},

      week: {},

      selectionMode: {
        default: 'day'
      },

      showWeekNumber: {
        type: Boolean,
        default: false
      },

      disabledDate: {},

      minDate: {},

      maxDate: {},

      rangeState: {
        default () {
          return {
            selected: true,
            endDate: null,
            selecting: false,
            row: null,
            column: null
          }
        }
      }
    },

    computed: {
      offsetDay () {
        const week = this.firstDayOfWeek
        // 周日为界限，左右偏移的天数，3217654 例如周一就是 -1，目的是调整前两行日期的位置
        return week > 3 ? 7 - week : -week
      },

      WEEKS () {
        const week = this.firstDayOfWeek
        return DateUtils.WEEKS.concat(DateUtils.WEEKS).slice(week, week + 7)
      },

      monthDate () {
        return this.date.getDate()
      },

      startDate () {
        return DateUtils.getStartDateOfMonth(this.year, this.month)
      },

      rows () {
        const date = new Date(this.year, this.month, 1)
        let day = DateUtils.getFirstDayOfMonth(date) // day of first day
        const dateCountOfMonth = DateUtils.getDayCountOfMonth(date.getFullYear(), date.getMonth())
        const dateCountOfLastMonth = DateUtils.getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1))

        day = (day === 0 ? 7 : day)

        const offset = this.offsetDay
        const rows = this.tableRows
        let count = 1
        let firstDayPosition

        const startDate = this.startDate
        const disabledDate = this.disabledDate
        const now = DateUtils.clearHours(new Date())

        for (let i = 0; i < 6; i++) {
          const row = rows[i]

          if (this.showWeekNumber) {
            if (!row[0]) {
              row[0] = {type: 'week', text: DateUtils.getWeekNumber(new Date(startDate.getTime() + DateUtils.DateUtils.DAY_DURATION * (i * 7 + 1)))}
            }
          }

          for (let j = 0; j < 7; j++) {
            let cell = row[this.showWeekNumber ? j + 1 : j]
            if (!cell) {
              cell = {row: i, column: j, type: 'normal', inRange: false, start: false, end: false}
            }

            cell.type = 'normal'

            const index = i * 7 + j
            const time = startDate.getTime() + DateUtils.DAY_DURATION * (index - offset)
            cell.inRange = time >= DateUtils.clearHours(this.minDate) && time <= DateUtils.clearHours(this.maxDate)
            cell.start = this.minDate && time === DateUtils.clearHours(this.minDate)
            cell.end = this.maxDate && time === DateUtils.clearHours(this.maxDate)
            const isToday = time === now

            if (isToday) {
              cell.type = 'today'
            }

            if (i >= 0 && i <= 1) {
              if (j + i * 7 >= (day + offset)) {
                cell.text = count++
                if (count === 2) {
                  firstDayPosition = i * 7 + j
                }
              } else {
                cell.text = dateCountOfLastMonth - (day + offset - j % 7) + 1 + i * 7
                cell.type = 'prev-month'
              }
            } else {
              if (count <= dateCountOfMonth) {
                cell.text = count++
                if (count === 2) {
                  firstDayPosition = i * 7 + j
                }
              } else {
                cell.text = count++ - dateCountOfMonth
                cell.type = 'next-month'
              }
            }

            cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time))

            this.$set(row, this.showWeekNumber ? j + 1 : j, cell)
          }

          if (this.selectionMode === 'week') {
            const start = this.showWeekNumber ? 1 : 0
            const end = this.showWeekNumber ? 7 : 6
            const isWeekActive = this.isWeekActive(row[start + 1])

            row[start].inRange = isWeekActive
            row[start].start = isWeekActive
            row[end].inRange = isWeekActive
            row[end].end = isWeekActive
          }
        }

        rows.firstDayPosition = firstDayPosition

        return rows
      }
    },

    watch: {
      'rangeState.endDate' (newVal) {
        this.markRange(newVal)
      }
    },

    data () {
      return {
        tableRows: [[], [], [], [], [], []]
      }
    },

    methods: {

      getLocale: LOCALES.GetLocale,

      getCellClasses (cell) {
        const selectionMode = this.selectionMode
        const monthDate = this.monthDate

        let classes = []
        if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
          classes.push('available')
          if (cell.type === 'today') {
            classes.push('today')
          }
        } else {
          classes.push(cell.type)
        }

        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') &&
          Number(this.year) === this.date.getFullYear() && this.month === this.date.getMonth() && monthDate === Number(cell.text)) {
          classes.push('current')
        }

        if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || this.selectionMode === 'week')) {
          classes.push('in-range')

          if (cell.start) {
            classes.push('start-date')
          }

          if (cell.end) {
            classes.push('end-date')
          }
        }

        if (cell.disabled) {
          classes.push('disabled')
        }

        return classes.join(' ')
      },

      getDateOfCell (row, column) {
        const startDate = this.startDate

        return new Date(startDate.getTime() + (row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay) * DateUtils.DAY_DURATION)
      },

      getCellByDate (date) {
        const startDate = this.startDate
        const rows = this.rows
        const index = (date - startDate) / DateUtils.DAY_DURATION
        const row = rows[Math.floor(index / 7)]

        if (this.showWeekNumber) {
          return row[index % 7 + 1]
        } else {
          return row[index % 7]
        }
      },

      isWeekActive (cell) {
        if (this.selectionMode !== 'week') return false
        const newDate = new Date(this.year, this.month, 1)
        const year = newDate.getFullYear()
        const month = newDate.getMonth()

        if (cell.type === 'prev-month') {
          newDate.setMonth(month === 0 ? 11 : month - 1)
          newDate.setFullYear(month === 0 ? year - 1 : year)
        }

        if (cell.type === 'next-month') {
          newDate.setMonth(month === 11 ? 0 : month + 1)
          newDate.setFullYear(month === 11 ? year + 1 : year)
        }

        newDate.setDate(parseInt(cell.text, 10))

        return DateUtils.getWeekNumber(newDate) === this.week
      },

      markRange (maxDate) {
        const startDate = this.startDate
        if (!maxDate) {
          maxDate = this.maxDate
        }

        const rows = this.rows
        const minDate = this.minDate
        for (let i = 0, k = rows.length; i < k; i++) {
          const row = rows[i]
          for (let j = 0, l = row.length; j < l; j++) {
            if (this.showWeekNumber && j === 0) continue

            const cell = row[j]
            const index = i * 7 + j + (this.showWeekNumber ? -1 : 0)
            const time = startDate.getTime() + DateUtils.DAY_DURATION * (index - this.offsetDay)

            cell.inRange = minDate && time >= DateUtils.clearHours(minDate) && time <= DateUtils.clearHours(maxDate)
            cell.start = minDate && time === DateUtils.clearHours(minDate.getTime())
            cell.end = maxDate && time === DateUtils.clearHours(maxDate.getTime())
          }
        }
      },

      handleMouseMove (event) {
        if (!this.rangeState.selecting) return

        this.$emit('changerange', {
          minDate: this.minDate,
          maxDate: this.maxDate,
          rangeState: this.rangeState
        })

        const target = event.target
        if (target.tagName !== 'TD') return

        const column = target.cellIndex
        const row = target.parentNode.rowIndex - 1
        const {row: oldRow, column: oldColumn} = this.rangeState

        if (oldRow !== row || oldColumn !== column) {
          this.rangeState.row = row
          this.rangeState.column = column

          this.rangeState.endDate = this.getDateOfCell(row, column)
        }
      },

      handleClick (event) {
        let target = event.target

        if (target.tagName !== 'TD') return
        if (DomUtils.hasClass(target, 'disabled') || DomUtils.hasClass(target, 'week')) return

        let selectionMode = this.selectionMode

        if (selectionMode === 'week') {
          target = target.parentNode.cells[1]
        }

        let year = Number(this.year)
        let month = Number(this.month)

        const cellIndex = target.cellIndex
        const rowIndex = target.parentNode.rowIndex

        const cell = this.rows[rowIndex - 1][cellIndex]
        const text = cell.text
        const className = target.className

        const newDate = new Date(year, month, 1)

        if (className.indexOf('prev') !== -1) {
          if (month === 0) {
            year = year - 1
            month = 11
          } else {
            month = month - 1
          }
          newDate.setFullYear(year)
          newDate.setMonth(month)
        } else if (className.indexOf('next') !== -1) {
          if (month === 11) {
            year = year + 1
            month = 0
          } else {
            month = month + 1
          }
          newDate.setFullYear(year)
          newDate.setMonth(month)
        }

        newDate.setDate(parseInt(text, 10))

        if (this.selectionMode === 'range') {
          if (this.rangeState.selected) {
            const minDate = new Date(newDate.getTime())
            const maxDate = null

            this.$emit('pick', {minDate, maxDate}, false)
            this.rangeState.selected = false
            this.rangeState.selecting = true
            this.markRange(this.minDate)
          } else if (this.minDate && !this.maxDate) {
            if (newDate >= this.minDate) {
              const maxDate = new Date(newDate.getTime())
              this.rangeState.selected = true
              this.rangeState.selecting = false

              this.$emit('pick', {
                minDate: this.minDate,
                maxDate
              })
            } else {
              const minDate = new Date(newDate.getTime())

              this.$emit('pick', {minDate, maxDate: this.maxDate}, false)
            }
          }
        } else if (selectionMode === 'day') {
          this.$emit('pick', newDate)
        } else if (selectionMode === 'week') {
          let weekNumber = DateUtils.getWeekNumber(newDate)

          const value = newDate.getFullYear() + 'w' + weekNumber
          this.$emit('pick', {
            year: newDate.getFullYear(),
            week: weekNumber,
            value: value,
            date: newDate
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./../css/variables";

  .date-table {
    font-size: 12px;
    min-width: 224px;
    user-select: none;

    .is-week-mode{
      .date-table-row{
        &:hover{
          background-color: $datePicker-cell-hover-color;
        }

        &.current{
          background-color: $datePicker-range-color;
        }
      }
    }

    td {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;

      &.next-month,
      &.prev-month {
        color: $datePicker-off-color;
      }

      &.today {
        color: $datePicker-text-hover-color;
        position: relative;
        &:before {
          content: " ";
          position: absolute;
          top: 0px;
          right: 0px;
          width: 0;
          height: 0;
          border-top: 0.5em solid $datePicker-active-color;
          border-left: .5em solid transparent;
        }
        &.in-range:before {
          border-top: 0.5em solid lighten($datePicker-active-color, 10%);
        }

      }

      &.available:hover {
        background-color: $datePicker-cell-hover-color;
      }
      &.available.in-range:hover {
        color: #fff;
      }

      &.in-range {
        background-color: $datePicker-range-color;
        &:hover {
          background-color: $datePicker-range-hover-color;
        }
      }

      &.current:not(.disabled),
      &.start-date,
      &.end-date {
        background-color: $datePicker-active-color !important;
        color: #fff;
      }

      &.disabled {
        background-color: #f4f4f4;
        opacity: 1;
        cursor: not-allowed;
        color: #ccc;
      }

      &.week {
        font-size: 80%;
        color: $datePicker-header-color;
      }
    }

    th {
      padding: 5px;
      text-align: center;
      color: $datePicker-header-color;
      font-weight: 400;
    }
  }
</style>
